<template>
  <div class="fahter clearfix">
    <el-aside class="nav" width="200px">
      <el-col :span="24">
        <el-menu
          :default-active="this.$route.path"
          router
          mode="horizontal"
          class="el-menu-vertical-demo"
        >
          <el-menu-item v-for="menu in menus" :key="menu.menuId" :index="'/'+menu.url">
            <i class="el-icon-menu"></i>
            <span slot="title">{{menu.menuName}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>

    <!-- <div class="clear"></div> -->
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      menus: [
        {
          menuId: 1,
          icon: "",
          menuName: "类别管理",
          hasThird: "N",
          url: "views/clothes/productManage"
        },
        {
          menuId: 2,
          icon: "",
          menuName: "库存管理",
          hasThird: "N",
          url: "views/clothes/stockManage"
        },
        {
          menuId: 3,
          icon: "",
          menuName: "尺码管理",
          hasThird: "N",
          url: "views/clothes/sizeManage"
        },
        {
          menuId: 4,
          icon: "",
          menuName: "颜色管理",
          hasThird: "N",
          url: "views/clothes/colorManage"
        },
        {
          menuId: 5,
          icon: "",
          menuName: "优惠管理",
          hasThird: "N",
          url: "views/count/unified"
        },
        {
          menuId: 6,
          icon: "",
          menuName: "销售管理",
          hasThird: "N",
          url: "views/sale/saleManage"
        },
        {
          menuId: 7,
          icon: "",
          menuName: "报表管理",
          hasThird: "N",
          url: "views/echart"
        },
        {
          menuId: 8,
          icon: "",
          menuName: "用户管理",
          hasThird: "N",
          url: "views/userManage"
        }
      ]
    };
  }
};
</script>

<style>
.nav {
  height: 670px;
  /* position: fixed; */
}
</style>